<template>
  <div style="width: 250px">
    <div class="title-box">
      <span class="subtitle ellipsis2" :title="cfg.chkitemName">{{ cfg.chkitemName }}</span>
      <el-checkbox :value="isThrowTerm" v-if="cfg.showThrowTerm" @click.native="changeScoreResult">甩项</el-checkbox>
    </div>
    <el-form class="form" ref="form" size="mini" :model="form" label-width="70px" :class="{ disabled: isThrowTerm }" @submit.native.prevent>
      <el-form-item label="得分录入" prop="scoreInput" :rules="isThrowTerm ? [] : rules.scoreInput">
        <div class="el-input-group el-input-group--append">
          <el-input-number v-model="form.scoreInput" :min="0" :max="maxVal" :precision="2" :controls="false" :disabled="isThrowTerm" style="width: 100%" @change="handleScoreResult" />
          <div class="el-input-group__append append-unit">{{ isPercent ? '%' : '分' }}</div>
        </div>
      </el-form-item>
      <el-form-item style="margin-bottom: 0" v-show="!isThrowTerm">
        <div class="footer">
          <div style="display: flex">
            <span style="margin-right: 10px; font-size: 12px">等级:</span>
            <el-dropdown trigger="click">
              <dict-tag class="pointer" :options="dict.type.cq_eval_score_level" :value="form.scoreLevel" style="zoom: 0.9" />
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="dict in dict.type.cq_eval_score_level" :key="dict.value" @click.native="form.scoreLevel = dict.value">{{ dict.label }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <el-dropdown trigger="click">
            <dict-tag class="pointer" :options="dict.type.cq_eval_result" :value="form.scoreResult" style="zoom: 0.9" />
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="dict in dict.type.cq_eval_result" :key="dict.value" @click.native="form.scoreResult = dict.value">{{ dict.label }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
// 数字得分。dataType 为 'EVAL_NUMBER'
import { CQ_EVAL_SCORE_TYPE as SCORE_TYPE, CQ_EVAL_RESULT_ENUM as RESULT } from '@/utils/baseData'
import { matchingRule } from './common'
import FormMixin from './mixin'
export default {
  name: 'NumberScore',
  mixins: [FormMixin],
  dicts: ['cq_eval_score_level', 'cq_eval_result'],
  data() {
    return {
      formInitVals: {
        chkitemScoreId: '',
        versionId: '',
        versionCode: '',
        chkitemCfgId: '',
        chkitemCode: '',
        scoreType: SCORE_TYPE.HUNDRED,
        scoreInput: 0,
        scoreLevel: '',
        scoreResult: '',
        isValid: 0,
        isExce: 0
      },
      rules: {
        scoreInput: [
          { required: true, message: '请输入得分' },
          {
            validator: (rule, val, cb) => {
              // 全为初始值，未输入得分
              const { scoreLevel, scoreResult } = this.form
              if (val === 0 && scoreLevel === '' && scoreResult === '') cb('请输入得分')
              cb()
            }
          }
        ]
      }
    }
  },
  computed: {
    isThrowTerm() {
      return this.form.scoreResult === RESULT.THROWTERM
    },
    isPercent() {
      const scoreType = this.cfg?.scoreType
      return scoreType === SCORE_TYPE.PERCENT
    },
    maxVal() {
      const scoreType = this.cfg?.scoreType
      if (this.isPercent) return 100
      return +scoreType || 100
    }
  },
  methods: {
    changeScoreResult(e) {
      // 防止点击事件冒泡两次
      if (e.target.tagName === 'INPUT') return

      const { form } = this
      if (this.isThrowTerm) {
        form.scoreResult = ''
        return this.handleScoreResult()
      }
      form.scoreResult = RESULT.THROWTERM
      form.scoreInput = 0
      this.$refs.form.clearValidate()
    },
    handleScoreResult() {
      const { form } = this
      if (this.isThrowTerm) return (form.scoreLevel = '')

      const value = form.scoreInput
      form.scoreLevel = matchingRule({ rule: this.cfg.levelStdd, value, type: 'number' })
      form.scoreResult = matchingRule({ rule: this.cfg.resultStdd, value, type: 'number' })
    }
  }
}
</script>
<style lang="scss" scoped>
.title-box {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ebeef5;
  padding: 10px 10px 5px;
  .subtitle {
    padding-right: 10px;
  }
}
.form {
  padding: 10px;
  &.disabled {
    opacity: 0.8;
    pointer-events: none;
  }
}
.append-unit {
  padding: 0 10px;
}
.footer {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}
</style>
